@()(implicit request: play.api.mvc.RequestHeader)
@main("CAPS / KASP") {
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>


	<style>

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}

			.form-horizontal .has-feedback .form-control-feedback {
				top: 0;
				right: -25px !important;
			}

			.has-feedback .form-control {
				padding-right: 10px;
			}

			.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
				padding-right: 0;
			}


			#fasta {
				display: none;
			}

			p {
				font-size: 16px;
			}

			.length {
				color: #3498db;
				width: 60px;
			}

			.blue {
				color: #3498db;
			}

			.orange {
				color: #f39c12;
			}

			td {
				font-size: 16px;
			}

			.table > thead > tr > th {
				border-bottom: none;
			}

			.table > tbody > tr > td {
				border-top: none;
			}

			.tableHead {
				background-color: #3498db;
				color: white;
				font-size: 16px;
			}

			.tableText {
				background-color: #F39C12;
				color: white;
			}

			.tableText:hover {
				background-color: #e08e0b;
			}

			.tableBorder {
				background-color: #F9F9F9;
			}

			.tableBorder:hover {
				background-color: #ECF0F1;
			}

			.tableNoBorder:hover {
				background-color: #ECF0F1;
			}

			pre {
				max-height: 300px;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">CAPS / KASP<span style="margin-bottom: 5px">
				<a class="selfQuestion" type="button" title="Detail Info" data-container="body" data-toggle="popover"
				data-placement="right" data-html="true" data-content="
				These scripts make a simple pipeline to design KASP (Kompetitive Allele Specific PCR) and CAPS/dCAPS primers for SNP genotyping.
"
				data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
			</span></h2>
		</div>
	</div>

	<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">

		<div class="form-group">
			<label class="control-label col-sm-2">Type of query:</label>
			<div class="col-sm-10" >
				<div class='radio' id='queryType'></div>
			</div>
		</div>

		<div class="eachMethod" id="text">

			<div class="form-group" >
				<label class="control-label col-sm-2">Enter FASTA sequences:</label>
				<div class="col-sm-8">
					<textarea class="form-control monospace" name="queryText" id="queryText" rows="5"></textarea>
					<span class="help-block">
						e.g.,&nbsp;<a href="javascript:void(0);" class="myShowExample"><em id="egQuery">
						example</em></a></span>
				</div>
			</div>

		</div>

		<div class="eachMethod" style="display: none" id="file">

			<div class="form-group">
				<label class="control-label col-sm-2">Upload file:</label>
				<div class="col-sm-8">
					<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
					data-show-upload="false">
					<span class="help-block"><a href="javascript:void(0);" class="myShowExampleFile"><em>
						Example file</em></a></span>
				</div>
			</div>

		</div>

		<div id="parameter">

			<div class="form-group">
				<label class="control-label col-sm-2">Which reference to use? :</label>
				<div class="col-sm-4">
					<select class="form-control" name="reference">
						<option value="GRCh38">GRCh38</option>
						<option value="GRCh37" selected>GRCh37</option>
					</select>
				</div>
			</div>

			<div class="form-group" style="display: none">
				<label class="control-label col-sm-2">Ploidy:</label>
				<div class="col-sm-10">
					<div class='radio' id='ploidy'></div>
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Design CAPS/dCAPS primers<span style="margin-bottom: 5px">
					<a class="selfQuestion" type="button" title="Detail Info" data-container="body" data-toggle="popover"
					data-placement="right" data-html="true" data-content="
					If yes, CAPS/dCAPS primers will be designed.
"
					data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
				</span>:</label>
				<div class="col-sm-3">
					<div class='radio' id='caps'></div>
				</div>
				<label class="control-label col-sm-2">Design KASP primers<span style="margin-bottom: 5px">
					<a class="selfQuestion" type="button" title="Detail Info" data-container="body" data-toggle="popover"
					data-placement="right" data-html="true" data-content="
					If yes, KASP primers will be designed.
"
					data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
				</span>:</label>
				<div class="col-sm-3">
					<div class='radio' id='kasp'></div>
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Pick primer anyway<span style="margin-bottom: 5px">
					<a class="selfQuestion" type="button" title="Detail Info" data-container="body" data-toggle="popover"
					data-placement="right" data-html="true" data-content="
					If yes, primers will be picked even if it violates specific constraints. Choose this only if you do not get any primers.
"
					data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
				</span>:</label>
				<div class="col-sm-3">
					<div class='radio' id='pickAnyway'></div>
				</div>
				<label class="control-label col-sm-2">Max primer TM:</label>
				<div class="col-sm-3">
					<input class="form-control" name="maxTm" value="63">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">
					Maximum NEB restriction enzyme price<span style="margin-bottom: 5px">
					<a class="selfQuestion" type="button" title="Detail Info" data-container="body" data-toggle="popover"
					data-placement="right" data-html="true" data-content="
					Maximum NEB restriction enzyme price (dollars per 1000 U)
"
					data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
				</span>:</label>
				<div class="col-sm-3">
					<input class="form-control" name="price" value="200">
				</div>
				<label class="control-label col-sm-2">Maximum Primer Size<span style="margin-bottom: 5px">
					<a class="selfQuestion" type="button" title="Detail Info" data-container="body" data-toggle="popover"
					data-placement="right" data-html="true" data-content="
					Maximum Primer Size (no larger than 36)
"
					data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
				</span>:</label>
				<div class="col-sm-3">
					<input class="form-control" name="maxSize" value="25">
				</div>
			</div>

		</div>

		<div class="form-group">
			<div class="actions col-sm-offset-2 col-sm-2">
				<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
					Run</button>
			</div>
		</div>


	</form>
	<hr>
	<div id="result" style="display: none;">
		<h4>Result:</h4>
		<div class="myPre">
			<h5>All alignment raw:
				&nbsp;<button class="btn btn-primary myDownloadPre" data-value="All_alignment_raw.fa"><i class="fa fa-download"></i>&nbsp;Download</button>
			</h5>
			<pre id="alignment" style="background-color: white"></pre>
		</div>
		<div class="myPre">
			<h5>Potential CAPS primers:
				&nbsp;<button class="btn btn-primary myDownloadPre" data-value="Potential_CAPS_primers.tsv"><i class="fa fa-download"></i>&nbsp;Download</button>
			</h5>
			<pre id="caps" style="background-color: white"></pre>
		</div>
		<div class="myPre">
			<h5>Potential KASP primers:
				&nbsp;<button class="btn btn-primary myDownloadPre" data-value="Potential_KASP_primers.tsv" ><i class="fa fa-download"></i>&nbsp;Download</button>
			</h5>
			<pre id="kasp" style="background-color: white"></pre>
		</div>
	</div>


	<script>

			$(function () {

				Caps.init

			})

	</script>
}
